/**
 * Created by Delicate on 2018/1/3.
 */
import React from 'react';
import {
    StyleSheet,
    View,
    Image,
    Text,
    ScrollView,
    Clipboard,
    Linking
} from 'react-native';
import DeviceInfo from 'react-native-device-info'
import Toast from 'react-native-simple-toast'

import NavBar from '../../components/NavBarView'
import HorizontalMenu from '../../components/HorizontalMenuView'
import Constants from '../../config/Constants'

let _self;

class Views extends React.Component {

    constructor(props) {
        super(props)
        _self = this;

    }

    componentWillMount() {

    }

    componentDidMount() {

    }

    call(str) {
        Linking.openURL('tel:'+str).catch(err=>{
            _self.clip(str);
        })
    }

    clip(str) {
        Clipboard.setString(str);
        Toast.show('已复制到剪贴板');
    }

    //跳转封装
    skip(route, params) {
        _self.props.navigation.navigate(route, params ? params : {});
    }

    render() {
        return (
            <View style={base.baseOuter}>
                <NavBar host={this} title="关于我们"/>
                <ScrollView style={styles.container}>
                    <View style={[base.columnCC, styles.topBox]}>
                        <Image
                            resizeMode={'contain'}
                            source={require('../../sources/image_about_logo.png')}
                            style={styles.logo}/>
                        <Text allowFontScaling={false} style={styles.version}>V {DeviceInfo.getVersion()}</Text>
                    </View>
                    <View style={styles.listGroup}>
                        <HorizontalMenu text={`关于${Constants.APP_NAME}`} onPress={() => this.skip('AboutMai')}/>
                        <HorizontalMenu text="平台协议" onPress={() => this.skip('Agreement',{id:'1'})}/>
                        <HorizontalMenu
                            text="客服电话"
                            subText={Constants.APP_CUSTOMER_TEL_VIEW}
                            rightShow={false}
                            onPress={() => this.call(Constants.APP_CUSTOMER_TEL)}/>
                        <HorizontalMenu
                            text="服务时间"
                            subText={Constants.APP_SERVICE_TIME}
                            rightShow={false}/>
                        <HorizontalMenu
                            text="微信公众号"
                            subText={Constants.APP_WE_CHAT_ID}
                            rightShow={false}
                            onPress={() => this.clip(Constants.APP_WE_CHAT_ID)}/>
                        <HorizontalMenu
                            last={true}
                            text="平台网站"
                            subText={Constants.APP_PC_WEBSITE}
                            rightShow={false}
                            onPress={() => this.clip(Constants.APP_PC_WEBSITE)}/>
                    </View>
                </ScrollView>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        width: layout.MAX_WIDTH
    },
    topBox: {
        paddingTop: layout.GAP_VERTICAL_MID,
        height: layout.height(400)
    },
    logo: {
        width: layout.width(137),
        height: layout.height(137)
    },
    version: {
        marginTop: layout.GAP_VERTICAL_LARGE,
        fontSize: layout.font(24)
    },
    listGroup: {
        backgroundColor: '#fff'
    }
})

//路由
const AboutUs = {
    screen: Views,
    navigationOptions: {
        header: null,
    },
    name: 'AboutUs',
    sign: false
};

export default AboutUs;